<template>
	
	<view  class="page group-edit">
		<u--form
			labelPosition="left"
			:model="gysForm"
			:rules="rules"
			ref="uForm"
			labelWidth="auto"
		>
			
			<u-form-item
				label="供应商名称"
				prop="gongyingshangmingcheng"
				borderBottom
				ref="item1"
			>
				<u--input
					v-model="gysForm.gongyingshangmingcheng"
					placeholder="请输入供应商名称"	
				></u--input>
			</u-form-item>
			<u-form-item
				label="供应商负责人"
				prop="fuzeren"
				borderBottom
				ref="item1"
			>
				<u--input
					v-model="gysForm.fuzeren"
					placeholder="请输入供应商负责人"
				></u--input>
			</u-form-item>
			<u-form-item
				label="供应商电话"
				prop="gongyingshangdianhua"
				borderBottom
				ref="item1"
			>
				<u--input
					v-model="gysForm.gongyingshangdianhua"
					placeholder="供应商电话"
				></u--input>
			</u-form-item>
			<u-form-item
				label="供应商地址"
				prop="gongyingshangdizhi"
				borderBottom
				ref="item1"
			>
				<u--input
					v-model="gysForm.gongyingshangdizhi"
					placeholder="供应商地址"
				></u--input>
			</u-form-item>
			<u-form-item
				label="营业执照"
				prop="zizhizhengming"
				borderBottom
				ref="item1"
			>
				<image-upload @onBefore="onUploadImageBefore" @onSuccess="onUnloadImageSuccess">
					<image :src="gysForm.zizhizhengming" class="group-image"></image>
				</image-upload>
			
			</u-form-item>
		</u--form>
		<u-button type="primary" @click="submit()">提交</u-button>
	</view>
</template>

<script>
	import imageUpload from "@/components/image-upload/image-upload.vue"
	import { gongyingshangUpdate, getUserInfo} from '@/api/api.js'
	import {toLogin} from '@/libs/login.js';
	import {mapGetters} from 'vuex';
	import {HTTP_REQUEST_URL} from '@/config/app';
	export default {
		computed: mapGetters(['isLogin','userInfo']),
		components: { imageUpload },
		data() {
			return {
				baseUrl: HTTP_REQUEST_URL,
				gysForm: {
					id: '',
					gongyingshangmingcheng:'',
					fuzeren: '',
					gongyingshangdianhua: '',
					gongyingshangdizhi: '',
					zizhizhengming:'',
					iscom: '',
				},
				rules: {
					'gongyingshangmingcheng': {
						type: 'string',
						required: true,
						message: '请输入供应商名称',
						trigger: ['blur', 'change']
					},
					'fuzeren': {
						type: 'string',
						required: true,
						message: '请输入供应商负责人',
						trigger: ['blur', 'change']
					},
					'gongyingshangdianhua': {
						type: 'string',
						required: true,
						message: '请输入供应商电话',
						trigger: ['blur', 'change']
					},
					'gongyingshangdizhi': {
						type: 'string',
						required: true,
						message: '请输入供应商地址',
						trigger: ['blur', 'change']
					},
					'zizhizhengming': {
						type: 'string',
						required: true,
						message: '请上传营业执照',
						trigger: ['blur', 'change']
					},

				},
			}
		},
		onReady() {
				//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
				 	this.$refs.uForm.setRules(this.rules)
			},
		  onShow() {
			var that = this
			if(!this.$store.getters.isLogin){
				toLogin()
			} else {
			   this.getuser()
		  
			}
		  },
		methods: {
			getuser(){
				getUserInfo().then(res => {
					var userInfo = res.data;
					this.gysForm = {
						id: userInfo.id,
						gongyingshangmingcheng: userInfo.gongyingshangmingcheng,
						fuzeren: userInfo.fuzeren,
						gongyingshangdianhua: userInfo.gongyingshangdianhua,
						gongyingshangdizhi: userInfo.gongyingshangdizhi,
						zizhizhengming:userInfo.zizhizhengming,
						iscom: 1,
					}
					console.log(123,this.gysForm)
					
				}).catch(err => {
					console.log("err",err)
				})
			},
			submit() {
				if(!this.$store.getters.isLogin){
					toLogin()
					return;
				}
				this.$refs.uForm.validate().then(res => {
					this.modify()
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},
			onUploadImageBefore(file,callback) {
				
				
				callback(true)
				// return true;
			},
			onUnloadImageSuccess(file, res) {
				console.log("11",res)
				this.gysForm.zizhizhengming = res.data.url;

			},
			modify() {
				this.gysForm.id = this.userInfo.id;
				this.gysForm.iscom = 1;
				gongyingshangUpdate(this.gysForm).then((res) => {
					uni.showToast({
						title: "更新信息成功",
						icon: 'none'
					});
				this.$store.dispatch('USERINFO');
				 //    var user = this.userInfo;
					// user.gongyingshangmingcheng = this.gysForm.gongyingshangmingcheng;
					// user.fuzeren = this.gysForm.fuzeren;
					// user.gongyingshangdianhua = this.gysForm.gongyingshangdianhua;
					// user.gongyingshangdizhi = this.gysForm.gongyingshangdizhi;
					// user.zizhizhengming = this.gysForm.zizhizhengming;
					// user.iscom = this.gysForm.iscom;
					// this.$store.commit('UPDATE_USERINFO',user);
					
					setTimeout(() => {
					
						uni.navigateBack();
					}, 1000);

				}).catch(err => {
					this.$u.toast(err)
				})
			},
		
		},
		
		onLoad(options) {
			
		}
	}
</script>

<style lang="scss" scoped>
	.group-edit {
		padding: 20rpx;

		.group-image {
			width: 200rpx;
			height: 200rpx;
			border: 1px solid #ccc;
			border-radius: 5%;
		}
	}
	
	.avatar-image {
		position: relative;
		overflow: hidden;
		border: 1px solid #ccc;
		vertical-align: bottom;	
	}
	
</style>